<%--
  Created by IntelliJ IDEA.
  User: wk
  Date: 2020/5/11
  Time: 23:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css">
<style type="text/css">
    .layui-table-cell{ text-align: center; height: auto; white-space: normal; }
</style>
<script>
    function myTable(){
        layui.table.render({
            elem: '#userTable' //指定原始表格元素选择器（推荐id选择器）
            ,page:true
            ,url:'${pageContext.request.contextPath}/user/findAll'
            ,toolbar:"#myToolBar"
            ,cols: [[
                {field:'userId',title:'ID'},
                {field:'userTelphone',title:'手机号'},
                {field:'userImage',title:'头像',templet:
                        '<div><img src="${pageContext.request.contextPath}/img/{{d.userImage}}"></div>'
                },
                {field:'userPassword',title:'用户密码'},
                {field:'userNickName',title:'昵称'},
                {field:'userName',title:'用户名'},
                {field:'useSex',title:'性别'},
                {field:'userAutograph',title:'个性签名'},
                {field:'userProvince',title:'省份'},
                {field:'userCity',title:'城市'},
                {field:'userCreateDate',title:'创建日期'},
                {field:'userStatus',title:'状态',templet:function (d) {
                        return d.userStatus==1?"激活":"冻结"
                    }},
                {field:'guru.guruName',title:'上师名称',templet:function (d) {
                        return d.guru.guruName;
                    }},
                {title:'操作',templet:"#caozuoTpl",align:"center"}
            ]] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
    }
    layui.use(['element','jquery','table','upload','form'], function() {
        element = layui.element;
        var table = layui.table;
        var upload = layui.upload;
        var form = layui.form;
        myTable();
    })

    //文件上传
    upload.render({
        elem:"#test1"
        ,auto:false
        ,field:"picture1"
        ,accept:"images"
        ,choose: function(obj){
            var files1 = obj.pushFile()
            obj.preview(function(index, file, result1){
                $('#demo1').attr('src', result1); //图片链接（base64）
            });
        }
    });

    //文件上传
    upload.render({
        elem:"#test2"
        ,auto:false
        ,field:"picture2"
        ,accept:"images"
        ,choose: function(obj){
            var files1 = obj.pushFile()
            obj.preview(function(index, file, result1){
                $('#demo2').attr('src', result1); //图片链接（base64）
            });
        }
    });

    //打开添加界面
    function  toAdd() {
        var $= layui.jquery;
        var form = layui.form;
        $.ajax({
            url:"${pageContext.request.contextPath}/user/findGuru",
            type:"POST",
            success:function(data){
                $("#guruId").html("");
                // var RoleController="";
                // for(var i = 0;i<data.data.length;i++){
                //     RoleController+="<option value='"+data.data[i].guruId+"'>"+data.data[i].guruName+"</option>\n";
                //     console.log(RoleController);
                //  }
                // $("#guruId").append(RoleController);
                // form.render("select")
                $.each(data.data, function (index, item) {
                   var op =  new Option(item.guruName, item.guruId)
                    console.log(op)
                    $("#guruId").append(new Option(item.guruName, item.guruId));// 下拉菜单里添加元素

                });
                form.render("select")
            }
        })
        var index = layer.open({
            type:1,
            title:'添加',
            content: $('#addUser'),
            anim:5
        });
    }

    //添加用户
    //表单添加
    form.on('submit(addUser)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

        var formData = new FormData($("#addBanner")[0]);

        $.ajax({
            url:"${pageContext.request.contextPath}/user/addUser",
            data:formData,
            processData:false,
            contentType:false,
            type:"POST",
            success:function (data) {
                layer.msg(data.data, {
                    icon: 1,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                    // 关闭弹出层
                    layer.closeAll();
                    //刷新表格
                    table.reload("userTable")
                    $("#addBanner")[0].reset();
                    table.render();
                });
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    //打开修改弹出层
    function toUpdate(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/user/findOne",
            data:{id:id},
            type:"POST",
            success:function (data) {
                var s="";
                for(var i = 0;i<data.list.length;i++){
                    if(data.data.guru.guruId===data.list[i].guruId){
                        s="<option selected value='"+data.list[i].guruId+"'>"+
                            data.list[i].guruName+"</option>\\n"
                        $("#guruId1").append(s);
                    }else{
                        s="<option value='"+data.list[i].guruId+"'>"+
                            data.list[i].guruName+"</option>\n";
                        $("#guruId1").append(s);
                    }
                }
                console.log(data)
                layui.form.val("updateUser",data.data);
                var imgUrl =  data.data.userImage;
                $("#demo2").prop("src","${pageContext.request.contextPath}/img/"+imgUrl);
                //打开弹出层
                layui.layer.open({
                    type:"1",
                    title:"修改弹出层",
                    content:$("#updateUser"),
                    area:['800px','600px']
                })
            }
        })
    }
</script>
<!-- 工具栏开始-->
<script type="text/html" id="myToolBar">
    <button type="button" class="layui-btn layui-btn-danger" onclick="deleteSelected()">批量删除</button>
    <button type="button" class="layui-btn layui-btn-normal" onclick="toAdd()">添加</button>
    <div class="layui-inline">
        <label  class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width:200px;">
            <input type="text" name="bannerOldName" id="bannerOldName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" onclick="doSearch()" lay-filter="doSubmit" id="doSearch">搜索</button>
</script>
<!-- 工具栏结束-->
<!--操作模板 -->
<script type="text/html" id="caozuoTpl">
    <button type="button" class="layui-btn layui-btn-danger" onclick="remove({{d.userId}})">删除</button>
    <button type="button" class="layui-btn" onclick="toUpdate({{d.userId}})">修改</button>
</script>
<!-- 弹出层==>添加页面开始-->
<form style="display: none;margin: 20px"  id="addUser" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户昵称</label>
        <div class="layui-input-block">
            <input type="text" name="userNickName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户电话</label>
        <div class="layui-input-block">
            <input type="text" name="userTelphone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <input type="text" name="userAutograph" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <input type="text" name="userProvince" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="userCity" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师</label>
        <div class="layui-input-block" id="content">
            <select name="guru.guruId" id="guruId" lay-filter="guruId">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="userSex" lay-verify="required" value="男" title="男" checked>
            <input type="radio" name="userSex" lay-verify="required" value="女" title="女" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="userStatus" lay-verify="required" value="1" title="激活" checked>
            <input type="radio" name="userStatus" lay-verify="required" value="0" title="冻结" >
        </div>
    </div>
    <div class="layui-upload " style="margin-left: 100px">
        <button type="button" class="layui-btn picture1" id="test1" >上传头像</button>
        <div class="layui-upload-list">
            <img  class="layui-upload-img " id="demo1" width="100px" >
            <p id="demoText1"></p>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addBanner">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->
<!-- 弹出层==>修改页面开始-->
<form style="display: none;margin: 20px"  id="updateUser" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="hidden" name="userId">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户昵称</label>
        <div class="layui-input-block">
            <input type="text" name="userNickName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户电话</label>
        <div class="layui-input-block">
            <input type="text" name="userTelphone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <input type="text" name="userAutograph" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <input type="text" name="userProvince" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="userCity" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师</label>
        <div class="layui-input-block" id="content1">
            <select name="guru.guruId" id="guruId1" lay-filter="guruId1">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="userSex" lay-verify="required" value="男" title="男" checked>
            <input type="radio" name="userSex" lay-verify="required" value="女" title="女" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="userStatus" lay-verify="required" value="1" title="激活" checked>
            <input type="radio" name="userStatus" lay-verify="required" value="0" title="冻结" >
        </div>
    </div>
    <div class="layui-upload " style="margin-left: 100px">
        <button type="button" class="layui-btn picture1" id="test2" >上传头像</button>
        <div class="layui-upload-list">
            <img  class="layui-upload-img " id="demo2" width="100px" >
            <p id="demoText2"></p>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateBanner">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->
<body>
<table id="userTable"></table>
</body>
</html>
